<script setup>
import { reactive, ref, watchEffect } from 'vue';
import * as api from '@/api/public';
import * as area from '@/api/basic/area';
import { ElMessage } from 'element-plus';

// form表单类============
let form = reactive({
  id: '',
  communityName:'',
  areaFullIds: '',
  communityTel: '',
  communityAddress: '',
  communityIntroduce: '',
  longitude: '',
  latitude: '',
  structureName: '',
  structureSize: '',
  isDeleteFlag: '',
  createUser: '',
  createTime: '',
  firstLetter: ''

})

const formSetter = (v) => {
  form.id = v?.id;
  form.communityName = v?.communityName;
  form.areaFullIds = v?.areaFullIds;
  form.communityTel = v?.communityTel;
  form.communityAddress = v?.communityAddress;
  form.communityIntroduce = v?.communityIntroduce;
  form.longitude = v?.longitude;
  form.latitude = v?.latitude;
  form.structureName = v?.structureName;
  form.structureSize = v?.structureSize
  form.isDeleteFlag = v?.isDeleteFlag;
  form.createUser = v?.createUser;
  form.createTime = v?.createTime
  form.firstLetter = v?.firstLetter
};
// ==============

// 部门列表数据
let areas = reactive([]);

let structure1 = ref('');
let structure2 = ref('');
let structure3 = ref('');
let structure4 = ref('');

const init = () => {
  area.getAll().then(res => {
    areas.push(...res.data)
  })
}
init()

const props = defineProps({
  data: Object
})

const visible = defineModel();

watchEffect(() => {
  formSetter(props.data)
})

const emit = defineEmits(['transfer','success'])

const structureName = () => {
   return (structure1.value? structure1.value + '/' : '')
       + (structure2.value? structure2.value + '/' : '')
       + (structure3.value? structure3.value + '/' : '')
       + (structure4.value ? structure4.value : '')
}

const captureParentNode = (n,e) => {
  if (!n) return
  return n.find(item => {
    return item.code === e;
  })
}

// 提交方法
const submit = () =>{

  form.structureName = structureName()

  if(!form.id){
    console.log(form)
    api.add(form,'/community').then(res =>{
      ElMessage({
        message: res.msg,
        type: 'success'
      });
      emit('success')
      visible.value = false
    })
  }else{
    console.log(form)
    api.update(form,'/community').then(res =>{
      ElMessage({
        message: res.msg,
        type: 'success'
      });
      emit('success')
      visible.value = false
    })
  }
}
</script>
<template>
  <div>
    <el-dialog v-model="visible" :title="form.id ? '修改' : '新增小区'" width="750">
      <el-form :model="form">
        <div class="form-item">
          <el-form-item label="小区名称：">
            <el-input v-model="form.communityName" placeholder="请输入小区名称" />
          </el-form-item>
          <el-form-item label="管理处电话:">
            <el-input v-model="form.communityTel" placeholder="请输入管理处的电话"/>
          </el-form-item>
        </div>
        <div class="form-item">
          <el-form-item label="行政区划分：">
            <el-select v-model="form.areaFullIds" placeholder="请选择行政区划" style="width: 240px">
              <el-option
                  v-for="item in areas"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              >
                <span style="float: left">{{ item.name }}</span>
                <span v-if="item.parentCode !== '0'"
                      style="float: right;color: var(--el-text-color-secondary);font-size: 12px;">
                      {{ captureParentNode(areas,item.parentCode)?.name }}
                      <el-tooltip
                          class="box-item"
                          effect="dark"
                          content="上级地区"
                          placement="right"
                      >
                        <el-icon><QuestionFilled /></el-icon>
                      </el-tooltip>
                </span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="楼栋数：">
            <el-input v-model="form.structureSize" placeholder="请输入楼栋数"/>
          </el-form-item>
        </div>
        <el-form-item label="详细地址：">
          <el-input v-model="form.communityAddress" placeholder="请输入详细地址"/>
        </el-form-item>
        <el-form-item label="精确定位：">
          <el-input v-model="form.longitude" placeholder="打开地图标注/查看精确定位"/>
          <el-input v-model="form.latitude" placeholder="打开地图标注/查看精确定位"/>
        </el-form-item>
        <el-form-item label="小区介绍:" >
          <el-mention v-model="form.communityIntroduce" type="textarea" />
        </el-form-item>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="楼栋结构：1级结构： ">
            <el-select v-model="structure1" clearable placeholder="分期">
              <el-option label="分期" value="分期" />
            </el-select>
            <el-select v-model="structure2" clearable placeholder="楼栋">
              <el-option label="楼栋" value="楼栋" />
            </el-select>
            <el-select v-model="structure3" clearable placeholder="单元">
              <el-option label="单元" value="单元" />
            </el-select>
            <el-select v-model="structure4" clearable placeholder="房屋">
              <el-option label="房屋" value="房屋" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visible = false" style="padding: 0 16px;">取消</el-button>
          <el-button type="primary" @click="submit" style="padding: 0 16px;">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
.form-item {
  display: flex;
  justify-content: space-between;
}
</style>
